<div class="row">
	<div class="col-md-12">
		<ol class="breadcrumb">
			<li>
				<a href="#" onclick="toHome()">
					主页
				</a>
			</li>
			<li class="active">
				轮播图列表
			</li>
		</ol>
	</div>
</div>
<form role="form" class="form-horizontal">
	<div class="row page-cont">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cont-top">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">
						<span class="title-text">检索轮播图</span>
					</h4>
					<div class="panel-tools">
						<div class="dropdown">
							<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
								<i class="fa fa-cog"></i>
							</a>
							<ul class="dropdown-menu dropdown-light pull-right" role="menu">
								<li>
									<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>折叠</span> </a>
								</li>
								<li>
									<a class="panel-expand" href="#">
										<i class="fa fa-expand"></i> <span>全屏</span>
									</a>
								</li>
							</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="form-group panel-cont">
					    <label class="col-sm-2 control-label">名称</label>
					    <div class="col-sm-4">
					      <input type="text" class="form-control" id="bannerName" />
					    </div>
				  	</div>
					<!-- <div class="form-group panel-cont">
					    <label for="startDate" class="col-sm-2 control-label">开始时间</label>
					    <div class="col-sm-2 selectDate">
					   		<input type='text' readonly="readonly" class='form-control selectData' id='startDate' name='date' value='' />
					   		<i class="fa fa-calendar"></i>  
					    </div>
					    <label for="endDate" class="col-sm-2 control-label">结束时间</label>
					    <div class="col-sm-2 selectDate">
					    	<input type='text' readonly="readonly" class='form-control selectData' id='endDate' name='date' value='' />
					    	<i class="fa fa-calendar"></i>
					    </div>
					    <span class="col-sm-4 tips">
					    	<i class="fa fa-info-circle"></i>
					    	请选择创建日期的区间
					    </span>
				  	</div> -->
				  	<div class="form-group">
				  		<div class="col-sm-5 col-sm-offset-5">
				  			<button type="button" class="btn btn-primary check-list">查询</button>
				  			<button type="reset" class="btn reset-btn">重置</button>
				  		</div>
				  	</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cont-bottom">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">
						<span class="title-text">轮播图列表</span>
					</h4>
					<div class="panel-tools">
						<div class="dropdown">
							<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
								<i class="fa fa-cog"></i>
							</a>
							<ul class="dropdown-menu dropdown-light pull-right" role="menu">
								<li>
									<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>折叠</span> </a>
								</li>
								<li>
									<a class="panel-expand" href="#">
										<i class="fa fa-expand"></i> <span>全屏</span>
									</a>
								</li>
							</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="row table-btn">
					<div class="col-sm-12">
						<button type="button" class="btn btn-success add-btn">新增&nbsp;<i class="fa fa-plus"></i></button>
					</div>
				</div>
				<div class="panel-body table-body">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th class="hidden-xs">名称</th>
								<th class="hidden-xs">推广链接</th>
								<th class="hidden-xs">轮播图展示顺序</th>
								<th class="hidden-xs">创建时间</th>
								<th class="hidden-xs">类型</th>
								<th class="hidden-xs">操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- <tr align="center">
								<td>2343</td>
								<td>3423</td>
								<td>234</td>
								<td></td>
								<td></td>
								<td>
									<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>
									<button type="button" class="btn btn-green edit-btn">编辑&nbsp;<i class="fa fa-edit"></i></button>
									<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>
								</td>
							</tr> -->
						</tbody>
					</table>
					<div class="M-box3 page-style"></div>
				</div>
			</div>
		</div>
	</div>
</form>
<script>
	/**************************************变量********************************************/
	var pageNo = 1;    // 第几页
	var pageSize = 10;  // 每页几条
	var totalPage;     // 总页数
	var totalData;     // 总条数
	var username = GetQueryString("username");    // 用户姓名
	var token = MXCookie.get("token",token);      // 登陆token   

	/**************************************事件********************************************/
	datePicker($("#startDate"));  // 开始时间
	datePicker($("#endDate"));    // 结束时间
	
	// 查询
	$(".check-list").click(function(){
		getList();
		// 分页
		pageSetGet();		
	})

	// 添加
	toOperat($(".add-btn"),"view/movieBanner/add-banner.html");

    // 不删除
	$("body").on("click",".ask-no",function(){
		$(".ask-alert").fadeOut();	        	
    });		

    // 关闭弹框
	$("body").on("click",".close-icon",function(){
		$(".ask-alert").fadeOut();	        	
    });					


	/**************************************函数********************************************/
	// 确定删除
	function dialogyYesBtn () {
		var bannerId = $(".ask-alert").attr("data-id");
		var index = $(".ask-alert").attr("data-index");
    	deleteList(bannerId,index);	
	}

	// 列表
	function getList(){
		$("tbody").html("");
		$.ajax({
			url: localStorage.grobalUrl + "/banner/bannerList",
			type:"post",
			async:false,
			data:{
				username: username,
				token: token,  
				pageNo: pageNo,   
				pageCount: pageSize,
				name: $("#bannerName").val()
			},	
			success: function(data){
				console.log(data);
				var str = '<tr align="center">'+
								'<td class="img-name"></td>'+
								'<td class="link"></td>'+
								'<td class="img-order"></td>'+
								'<td class="create-time"></td>'+
								'<td class="img-type"></td>'+
								'<td>'+
									'<button type="button" class="btn btn-dark-yellow check-btn">查看&nbsp;<i class="fa fa-eye"></i></button>'+
									'<button type="button" class="btn btn-green edit-btn">编辑&nbsp;<i class="fa fa-edit"></i></button>'+
									'<button type="button" class="btn btn-red delete-btn">删除&nbsp;<i class="fa fa-trash-o"></i></button>'+
								'</td>'+
							'</tr>';				
				if(data.errCode == "00005"){
					tips("请重新登陆");
					setTimeout(function(){
						window.location.href = "login_login.html";
					},500);
				}	
				if(data.bannerLis){
					var dataVal = data.bannerLis.list;
					totalPage = data.bannerLis.totalPage;

					var num = 0;
					for(var i = 0; i < dataVal.length; i ++){
						var listVal = dataVal[i];
						if(listVal.type == "Banner"){
							$("tbody").append(str);
							$(".img-name").eq(num).text(listVal.name);
							$(".link").eq(num).text(listVal.link);
							$(".img-order").eq(num).text(listVal.show_order);
							$(".create-time").eq(num).text(listVal.create_time);
							$(".img-type").eq(num).text("轮播图");	
							$(".img-name").eq(num).attr("data-id",listVal.id);						
							num ++;
						}
					}	
					totalPage = Math.ceil(num/pageSize);
					totalData = num;
					// 查看
					jumpTo($(".check-btn"),"view/movieBanner/banner-view.html");
		        
			        // 编辑
			        jumpTo($(".edit-btn"),"view/movieBanner/edit-banner.html");

					// 删除按钮
			        $(".delete-btn").click(function(){
		             	var index = $(".delete-btn").index(this);
			            var bannerId = $(".img-name").eq(index).attr("data-id");
			            askAlert("是否要删除");
			            $(".ask-alert").attr("data-id",bannerId).attr("data-index",index);
			        });

			                
				}			
			},
			error: function(err){
				console.log(err);
			}
		});
	}
	getList();


	// 分页
	pageSetGet();	

	// 跳转
	function jumpTo(tag,pageUrl){
		tag.click(function(){
            var index = tag.index(this);
            var bannerId = $(".img-name").eq(index).attr("data-id");
            $(".pageAdd").attr("data-id",bannerId);
            url = pageUrl;
            getPage(url); 
        });			
	}


	// 删除
	function deleteList(bannerId,index){
		$.ajax({
			url: localStorage.grobalUrl + "/banner/deleteBanner",
			type: "post",
			data:{
				username: username,
				token: token,
				bannerID: bannerId
			},
			success: function(data){
				console.log(data);
				if(data.errCode == "00000"){
					$(".delete-btn").eq(index).parent().parent().remove();
					$(".ask-alert").fadeOut();
					tips("已删除");
				}else if(data.errCode == "00005"){
					tips("请重新登陆");
					setTimeout(function(){
						window.location.href = "login_login.html";
					},500);					
				}else{
					tips("删除失败");
				}				
			},
			error: function(err){
				console.log(err);
			}
		});
	}
	
</script>
